<div class="example-container">
  <ul
    cdkRadioGroup
    class="example-radio-group"
    aria-labelledby="disabled-skipped-radio-label"
  >
    <label class="example-label" id="disabled-skipped-radio-label">Select a Fruit (Disabled are Skipped)</label>
    @for (fruit of fruits; track fruit) {
      <li
        class="example-radio-button"
        [value]="fruit"
        [disabled]="disabledFruits.includes(fruit)"
        cdkRadioButton
        #radioButton="cdkRadioButton"
      >
        <span class="example-radio-indicator" [class.example-radio-checked]="radioButton.pattern.selected()"></span>
        <span>{{ fruit }} {{ disabledFruits.includes(fruit) ? '(Disabled)' : '' }}</span>
      </li>
    }
  </ul>
</div>
